<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<script type="text/javascript">
    $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

    function addrows() {
        if ($('#bloodId').val() == null || $('#bloodId').val() == "" || typeof($('#bloodId').val()) == "undefined") {
            toastr.error("请输入血袋号!");
            return;
        }
        if ($('#bloodComponentName').val() == null || $('#bloodComponentName').val() == "" || typeof($('#bloodComponentName').val()) == "undefined") {
            toastr.error("请选择血液成分!");
            return;
        }
        if ($('#bloodCapacity').val() == null || $('#bloodCapacity').val() == "" || typeof($('#bloodCapacity').val()) == "undefined") {
            toastr.error("请输入储血量!");
            return;
        }
        if ($('#bloodGatherDate').val() == null || $('#bloodGatherDate').val() == "" || typeof($('#bloodGatherDate').val()) == "undefined") {
            toastr.error("请选择采血日期!");
            return;
        }
        if ($('#invalDate').val() == null || $('#invalDate').val() == "" || typeof($('#invalDate').val()) == "undefined") {
            toastr.error("请选择有效期!");
            return;
        }
        var tbIdx = 0;
        if(typeof($("#contentTable tbody tr:last").attr('xia')) == 'undefined'){
            tbIdx = 0;
        }else{
            tbIdx = Number($("#contentTable tbody tr:last").attr('xia')) + 1;
        }
        var unitsName = $("#units").find("option:selected").text();
        var patBloodGroupName = $("#patBloodGroup").find("option:selected").text();
        var rhName = $("#rh").find("option:selected").text();
        var jsonuserinfo = $("#inputForm").serializeObject();
        var datastr = JSON.stringify(jsonuserinfo);
        var trHTML = "<tr xia='" + tbIdx + "'>";
        trHTML += "<td hidden>" + datastr + "</td>";
        trHTML += "<td hidden><input type='hidden' name='bloodInpDetail[" + tbIdx + "].id' value=''" + "/></td>";
        trHTML += "<td hidden><input type='hidden' name='bloodInpDetail[" + tbIdx + "].stateFlag' value='1'" + "/></td>";
        trHTML += "<td hidden>" + $('#bloodSource').val() + "<input type='hidden' id='detailList.bloodInpMaster.bloodSource" + tbIdx + "' name='detailList[" + tbIdx + "].bloodInpMaster.bloodSource' value='" + $('#bloodSource').val() +
        "'/></td>";
        trHTML += "<td hidden>"+ $('#inpNo').val() +"<input type='hidden' id='detailList.bloodInpMaster.inpNo" + tbIdx + "' name='detailList[" + tbIdx + "].bloodInpMaster.inpNo' value='" + $('#inpNo').val() +
        "'/></td>";
        trHTML += "<td>"+ $('#bloodId').val() +"<input type='hidden' id='detailList.bloodId" + tbIdx + "' name='detailList[" + tbIdx + "].bloodId' value='" + $('#bloodId').val() + "'/></td>";
        trHTML += "<td hidden>"+ $('#patBloodGroup').val() +"<input type='hidden' id='detailList.patBloodGroupCode" + tbIdx + "' name='detailList[" + tbIdx + "].patBloodGroupCode' value='" +
        $('#patBloodGroup').val() + "'/></td>";
        trHTML += "<td>"+ patBloodGroupName +"<input type='hidden' id='detailList.patBloodGroup" + tbIdx + "' name='detailList[" + tbIdx + "].patBloodGroup' value='" + patBloodGroupName + "'/></td>";
        trHTML += "<td hidden>"+ $('#rh').val() +"<input type='hidden' id='detailList.rhCode" + tbIdx + "' name='detailList[" + tbIdx + "].rhCode' value='" + $('#rh').val() + "'/></td>";
        trHTML += "<td>"+ rhName +"<input type='hidden' id='detailList.rh" + tbIdx + "' name='detailList[" + tbIdx + "].rh' value='" + rhName + "'/></td>";
        trHTML += "<td hidden>"+ $('#componentId').val() +"<input type='hidden' id='detailList.componentId" + tbIdx + "' name='detailList[" + tbIdx + "].componentId' value='" + $('#componentId').val() + "'/></td>";
        trHTML += "<td>"+ $('#bloodComponentName').val() +"<input type='hidden' id='detailList.bloodComponentName" + tbIdx + "' name='detailList[" + tbIdx + "].bloodComponentName' value='" +
        $('#bloodComponentName').val() + "'/></td>";
        trHTML += "<td>"+ $('#bloodCapacity').val() +"<input type='hidden' id='detailList.bloodCapacity" + tbIdx + "' name='detailList[" + tbIdx + "].bloodCapacity' value='" + $('#bloodCapacity').val() + "'/></td>";
        trHTML += "<td hidden>"+ $('#units').val() +"<input type='hidden' id='detailList.units" + tbIdx + "' name='detailList[" + tbIdx + "].units' value='" + $('#units').val() + "'/></td>";
        trHTML += "<td>"+ unitsName +"<input type='hidden' id='detailList.unitsName" + tbIdx + "' name='detailList[" + tbIdx + "].unitsName' value='" + unitsName + "'/></td>";
        trHTML += "<td>"+ $('#bloodGatherDate').val() +"<input type='hidden' id='detailList.bloodGatherDate" + tbIdx + "' name='detailList[" + tbIdx + "].bloodGatherDate' value='" + $('#bloodGatherDate').val() +
        "'/></td>";
        trHTML += "<td>"+ $('#invalDate').val() +"<input type='hidden' id='detailList.invalDate" + tbIdx + "' name='detailList[" + tbIdx + "].invalDate' value='" + $('#invalDate').val() + "'/></td>";
        trHTML += "<td>"+ $('#bloodDonorName').val() +"<input type='hidden' id='detailList.bloodDonorName" + tbIdx + "' name='detailList[" + tbIdx + "].bloodDonorName' value='" + $('#bloodDonorName').val() +
        "'/></td>";
        trHTML += "<td><a href='#' onclick='updateList(this)' class='btn btn-success btn-xs'>修改</a>" + "<a href='#' onclick='removeList(this)' class='applyBt btn btn-danger btn-xs'>删除</a></td>"
        trHTML += "</tr>";
        $("#inputForm input").val("");
        $("#contentTable").append(trHTML);
        return loadDiv('rigthCenterDiv', '${ctx}/blood/bloodImport/form');
    }

    //表单自动回填的方法
    var fillForm = function ($form, json) {
        var jsonObj = json;
        if (typeof json === 'string') {
            jsonObj = $.parseJSON(json);
        }
        for (var key in jsonObj) { // 遍历json字符串
            var objtype = jsonObjType(jsonObj[key]); // 获取值类型
            if (objtype === "array") { // 如果是数组，一般都是数据库中多对多关系
                var obj1 = jsonObj[key];
                for (var arraykey in obj1) {
                    // alert(arraykey + jsonObj[arraykey]);
                    var arrayobj = obj1[arraykey];
                    for (var smallkey in arrayobj) {
                        setCkb(key, arrayobj[smallkey]);
                        break;
                    }
                }
            } else if (objtype === "object") { // 如果是对象，啥都不错，大多数情况下，会有 xxxId
                // 这样的字段作为外键表的id

            } else if (objtype === "string") { // 如果是字符串
                var str = jsonObj[key];
                var date = new Date(str);
                if (date.getDay()) { // 这种判断日期是本人懒，不想写代码了，大家慎用。
                    $("[name=" + key + "]", $form).val(str);
                    continue;
                }

                var tagobjs = $("[name=" + key + "]", $form);
                if ($(tagobjs[0]).attr("type") == "radio") {// 如果是radio控件
                    $.each(tagobjs, function (keyobj, value) {
                        if ($(value).attr("val") == jsonObj[key]) {
                            value.checked = true;
                        }
                    });
                    continue;
                }
                $("[name=" + key + "]", $form).val(jsonObj[key]);
            } else { // 其他的直接赋值
                $("[name=" + key + "]", $form).val(jsonObj[key]);
            }

        }
    }

    var setCkb = function (name, value) {
        // alert(name + " " + value);
        // $("[name=" + name + "][value=" + value + "]").attr("checked", "checked");
        // 不知为何找不到具体标签;
        $("[name=" + name + "][val=" + value + "]").attr("checked", "checked");
    }

    var fillckb = function (name, json) {
        var jsonObj = json;
        if (typeof json === 'string') {
            jsonObj = $.parseJSON(json);
        }
        var str = jsonObj[name];
        if (typeof str === "string") {
            var array = str.split(",");
            $.each(array, function (key, value) {
                setCkb(name, value);
            });
        }
    }

    var jsonObjType = function (obj) {
        if (typeof obj === "object") {
            var teststr = JSON.stringify(obj);
            if (teststr[0] == '{' && teststr[teststr.length - 1] == '}')
                return "class";
            if (teststr[0] == '[' && teststr[teststr.length - 1] == ']')
                return "array";
        }
        return typeof obj;
    }
    //表单回填EN
</script>
<div class="content-wrap">
    <div class="wrapper" style="bottom: 50px;">
        <ul class="nav nav-tabs">
            <li>
                <a href="#" onclick="loadDiv('rigthCenterDiv','${ctx}/blood/bloodExport/form')">出库处理</a>
            </li>
        </ul>
        <section class="panel panel-default">
            <div class="panel-body">
                <div class="col-lg-12">
                    <form:form id="inputForm" data-parsley-validate="" modelAttribute="bloodOutpDetail" class="form-horizontal">
                    <form:hidden path="id" id="id" />
                    <div class="form-group">
                        <label class="col-sm-4 control-label">入库单号：</label>
                        <div class="col-sm-8">
                            <form:input path="bloodInpMaster.inpNo" id="inpNo" htmlEscape="false" class="form-control" maxlength="10" data-parsley-required="true" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">血袋号：</label>
                        <div class="col-sm-8">
                            <form:input path="bloodId" id="bloodId" htmlEscape="false" class="form-control" maxlength="100" data-parsley-required="true"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">血型:</label>
                        <div class="col-sm-8">
                            <form:input path="patBloodGroupCode" id="patBloodGroupCode" htmlEscape="false" class="form-control" maxlength="64" data-parsley-required="true" readonly="true"/>
                            <form:input path="patBloodGroup" id="patBloodGroup" htmlEscape="false" class="form-control" maxlength="2" data-parsley-required="true" readonly="true"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">RH:</label>
                        <div class="col-sm-8">
                            <form:input path="rhCode" id="rhCode" htmlEscape="false" class="form-control" maxlength="64" data-parsley-required="true" readonly="true" />
                            <form:input path="rh" id="rh" htmlEscape="false" class="form-control" maxlength="2" data-parsley-required="true" readonly="true" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">血液成分：</label>
                        <div class="col-sm-8">
                            <form:hidden path="componentId" id="componentId"/>
                            <form:input path="bloodComponentName" id="bloodComponentName" htmlEscape="false" class="form-control" maxlength="20" readonly="true"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">储血量：</label>
                        <div class="col-sm-8">
                            <form:input path="bloodCapacity" id="bloodCapacity" htmlEscape="false" class="form-control" maxlength="8" readonly="true"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">单位：</label>
                        <div class="col-sm-8">
                            <form:hidden path="units" id="units" />
                            <form:input path="unitsName" id="unitsName" htmlEscape="false" class="form-control" maxlength="20" readonly="true" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">采血日期：</label>
                        <div class="col-sm-8">
                            <input name="bloodGatherDate" id="bloodGatherDate" value="${bloodOutpDetail.bloodGatherDate}" class="form-control Wdate" type="text" data-parsley-required="true" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">有效期：</label>
                        <div class="col-sm-8">
                            <input id="invalDate" name="invalDate" class="form-control Wdate" data-parsley-required="true" data-parsley-required="true" value='<fmt:formatDate
                            value="${bloodOutpDetail.invalDate}" pattern="yyyy-MM-dd"/>' readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">献血者：</label>
                        <div class="col-sm-8">
                            <form:input path="bloodDonorName" id="bloodDonorName" htmlEscape="false" class="form-control" maxlength="20" readonly="true"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">备注：</label>
                        <div class="col-sm-8">
                            <form:input path="remarks" id="remarks" htmlEscape="false" class="form-control" maxlength="500"/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <input id="btnSubmit" class="btn btn-primary" type="submit" value="确 定" onclick="addrows()">&nbsp;
                        <input id="btnCancel" class="btn" type="button" value="关 闭" onclick="closeRight()"></div>
                </div>
                </form:form>
            </div>
        </section>
    </div>
</div>
<script>
    autoCompleteInpNo("inpNo");
    function autoCompleteInpNo(inputId) {
        var url = "${ctx}/blood/bloodExport/autoCompleteInpNo";
        autoComplete(inputId, url,
                function (data) {
                    console.log(data);
                    var rows = [];
                    for (var i = 0; i < data.length; i++) {
                        rows[rows.length] = {
                            data: data[i],
                            value: data[i].bloodInpMaster.inpNo,
                            result: data[i].bloodInpMaster.inpNo
                        };
                    }
                    return rows;
                }, function (data, i, max) {
                    return data.bloodInpMaster.inpNo;
                }, function (event, data, formatted) {
                    console.log(data);
                })
    }

    function closeRight() {
        $("#bloodExportRightDiv").attr("style", "display: none");
        $("#bloodOutpDetailDiv").attr("class", "main-content col-lg-12");
        $("#bloodOutpDetailDiv").show('normal');
    }
</script>